<script setup name="staff_add">

import OAMain from "@/components/OAMain.vue";
import {ref, reactive} from "vue";
import {useAuthStore} from "@/stores/auth.js";
import staffhttp from "@/api/staffhttp.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
const authStore = useAuthStore();
let labelWidth = 300;
const ruleFormRef = ref()
const rules = reactive({
  realname: [{ message: '请输入员工真实姓名！', trigger: 'blur' , required: true}],
  password: [{ message: '请输入密码！', trigger: 'blur' , required: true}],
  email: [{ message: '请输入员工邮箱！', trigger: 'blur' , required: true}],
  telephone: [
    { message: '请输入员工手机号！', trigger: 'blur', required: true },
    {
      message: '手机号格式不正确！',
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('手机号不能为空'));
        } else if (!/^1[3-9]\d{9}$/.test(value)) {
          callback(new Error('手机号格式不正确'));
        } else {
          callback();
        }
      }
    }
  ],
})
const staffForm = ref({
  realname: "",
  password: "",
  email: "",
  telephone: "",
})
const onAddStaff = async () =>{
    ruleFormRef.value.validate(async valid => {
      if (valid) {
        try {
          console.log(staffForm);
          
          const result = await staffhttp.addStaff(staffForm.value)
          ElMessage.success('员工添加成功！')
          router.push({name: 'staff_list'})
        }catch(error){
          ElMessage.error(error)
        }
      }else{
         ElMessage.error((valid))
      }
    })
}
const onResetForm = () =>{
  staffForm.value.realname = "";
  staffForm.value.password = "";
  staffForm.value.email = "";
  staffForm.value.department = "";
  staffForm.value.leader = "";
  staffForm.value.telephone = "";
}
</script>

<template>
  <OAMain title="新增员工">
    <el-card shadow="always">
      <el-form
          ref="ruleFormRef"
          :model="staffForm"
          status-icon
          :rules="rules"
          label-width="80px"
          autocomplete="off"
      >
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="staffForm.realname"  type="text"  placeholder="请输入姓名" autocomplete="name"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="staffForm.email" type="text" placeholder="请输入邮箱" autocomplete="email" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="staffForm.password" type="password" placeholder="请输入密码" autocomplete="new-password"/>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="staffForm.leader" type="text"  :model-value="authStore.user.department.name" readonly/>
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model="staffForm.telephone" type="text" placeholder="请输入手机号" autocomplete="telephone" />
        </el-form-item>
        <el-form-item label="领导">
          <el-input v-model="staffForm.department" type="text"  :model-value="authStore.user.realname" readonly/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onAddStaff">
            提交
          </el-button>
          <el-button @click="onResetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </OAMain>
</template>

<style scoped>

</style>